<template>
	<view class="height-screen" style="padding: 0;">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">{{$t('group.exittz')}}</block>
		</cu-custom>
		<view class="flex flex-direction margin-ht" style="margin-top: 20rpx;">
			<text class="leftSoild text-xl text-black font-bold margin-bottom">
				<text class="text-red margin-right-xs">*</text>{{$t('public.title')}}
			</text>
			<u-input :placeholder="$t('public.placeholderContent')" v-model="title" :customStyle="inputStyle"></u-input>
			<text class="leftSoild text-xl text-black font-bold margin-tb">
				<text class="text-red margin-right-xs">*</text>{{$t('public.content')}}
			</text>
			<u-textarea v-model="content" :placeholder="$t('public.placeholderContent')" :customStyle="inputStyle" count
				maxlength="500"></u-textarea>

			<!-- 上传视频 -->
			<view class="">
				<view class="leftSoild text-xl text-black font-bold margin-tb">
					{{$t('public.video')}}
				</view>
				<!-- <uploadImg @sendImage="sendVideo" @delImage="delVideo" accept="video" :num="1" /> -->
				<view class="imageContent">
					<view v-if="videoShow" class="imageBox">
						<video :src="videoData"></video>
						<view class="delIcon" @click="handleDelvideo()">
							<u-icon name="close-circle" color="rgb(6, 193, 104)" size="18"></u-icon>
						</view>
					</view>
					<image v-if="videoData == null" src="@/static/img/upload.png" mode="widthFix"
						style="width: 160rpx;height: 160rpx;" @click="choosevideo"></image>
				</view>
			</view>

			<!-- 上传图片 -->
			<view class="">
				<view class="leftSoild text-xl text-black font-bold margin-tb">
					{{$t('public.img')}}
				</view>
				<!-- <uploadImg @sendImage="sendImage" @delImage="delImage" accept="image" /> -->
				<view class="imageContent">
					<view class="imageBox" v-for="(item,index) in imageList" :key="index">
						<image :src="item" mode="aspectFill"></image>
						<view class="delIcon" @click="handleDelimg(index)">
							<u-icon name="close-circle" color="rgb(6, 193, 104)" size="18"></u-icon>
						</view>
					</view>
					<image src="@/static/img/upload.png" mode="widthFix" style="width: 160rpx;height: 160rpx;"
						@click="chooseImage"></image>
				</view>

			</view>



		</view>
		<view class="" style="height: 200rpx;"></view>

		<view class="bottomContent">
			<view v-if="lang == 'en'" class="descText" style="margin-bottom: 20rpx;">
				Click Submit to agree to<text style="color: #06C168;margin-left: 5rpx;" @click="handleagreement">
					Publish Community Agreement </text>
			</view>

			<view v-else class="descText" style="margin-bottom: 20rpx;">
				点击提交即代表同意<text style="color: #06C168;" @click="handleagreement">
					《发布社区协议》 </text>
			</view>

			<view class="setButton" style="height: 90rpx;background: #06C168;border-radius: 40rpx;" @tap.stop="bbsEdit">
				<text class="font-400 text-df text-white">{{$t('public.release')}}</text>
			</view>
		</view>

		<!-- <xe-upload ref="XeUpload" :options="uploadOptions" @callback="handleUploadCallback"></xe-upload> -->
	</view>
</template>

<script>
	import uploadImg from '@/components/uploadImg.vue'
	import {
		bbsEdit,
		articleInfo
	} from '@/apis'
	export default {
		components: {
			uploadImg
		},
		data() {
			return {
				uploadOptions: {
					url: 'http://cw3.a.hlidc.cn/api/uploadFile'
				},
				title: '',
				content: '',
				inputStyle: {
					background: '#FFFFFF',
					borderRadius: '20rpx'
				},
				images: [],
				videoFile: [],
				videoName: '',
				lang: null,
				pageId: null,
				imageList: [],
				videoData: "",
				videoShow: false,
			}
		},
		onLoad(option) {
			console.log("id", option)
			this.pageId = option.groupId
			this.lang = uni.getStorageSync("lang")
			this.articleInfo()
		},
		methods: {
			chooseImage() {
				let that = this
				let token = uni.getStorageSync('token');
				uni.chooseImage({
					count: 9 - that.imageList.length,
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'https://www.slem.com.au/api/common/upload', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file',
								header: {
									'token': token,
								},
								success: (uploadFileRes) => {

									that.imageList.push(JSON.parse(uploadFileRes.data)
										.data
										.fullurl)
									that.images.push(JSON.parse(uploadFileRes.data)
										.data
										.url)
								},
								fail(e) {
									console.log("上传图片", e)
								}
							});
						}

						// let path = res.tempFilePaths[0]
						// uni.uploadFile({
						// 	url: 'https://www.slem.com.au/api/common/upload', //仅为示例，非真实的接口地址
						// 	filePath: path,
						// 	name: 'file',
						// 	header: {
						// 		'token': token,
						// 	},
						// 	success: (uploadFileRes) => {
						// 		console.log("uploadFileRes", uploadFileRes)
						// 		that.imageList.push(JSON.parse(uploadFileRes.data)
						// 			.data
						// 			.fullurl)
						// 		that.images.push(JSON.parse(uploadFileRes.data)
						// 			.data
						// 			.url)
						// 	},
						// 	fail(e) {
						// 		console.log("上传图片", e)
						// 	}
						// });
					}
				})
			},
			choosevideo() {
				let that = this
				let token = uni.getStorageSync('token');
				uni.chooseVideo({
					count: 1,
					success: res => {
						console.log("res", res)
						let path = res.tempFilePath
						uni.uploadFile({
							url: 'https://www.slem.com.au/api/common/upload', //仅为示例，非真实的接口地址
							filePath: path,
							name: 'file',
							header: {
								'token': token,
							},
							success: (uploadFileRes) => {
								console.log("uploadFileRes", uploadFileRes)
								that.videoData = JSON.parse(uploadFileRes.data)
									.data
									.fullurl
								that.videoFile = JSON.parse(uploadFileRes.data)
									.data
									.url
								this.videoShow = true
							},
							fail(e) {
								console.log("上传图片", e)
							}
						});
					}
				})

			},
			async articleInfo() {
				this.imageList = []
				const res = await articleInfo({
					id: this.pageId
				})
				this.title = res.title
				this.content = res.content
				this.images = res.images
				res.images = res.images.split(',')
				this.groupInfo = res
				this.images = res.images
				if (this.groupInfo.images.length > 0) {
					this.groupInfo.images.forEach((item, index) => {
						this.imageList.push("https://www.slem.com.au" + item)
					})
				} else {
					this.imageList = []
					this.images = []
				}
				this.videoFile = res.video_files == '' ? [] : res.video_files
				this.videoData = res.video_files == '' ? null : "https://www.slem.com.au" + res.video_files
				this.videoShow = res.video_files == '' ? false : true
				console.log("this.imageList", this.imageList, this.images)
			},

			handleagreement() {
				uni.navigateTo({
					url: "/pages/group/agreement"
				})
			},
			sendImage(event, keyWord) {
				this.images = [...this.images, ...event.sendList.splice(0, event.fileListLen)]
			},
			handleDelimg(e) {
				this.images.splice(e, 1)
				this.imageList.splice(e, 1)
			},
			handleDelvideo() {
				this.videoFile = []
				this.videoData = null
				this.videoShow = false
				this.$forceUpdate()
				console.log("33333333", this.videoFile, this.videoData)
			},
			sendVideo(event, keyWord) {
				this.videoFile = [...this.videoFile, ...event.sendList.splice(0, event.fileListLen)]
			},
			delVideo(e) {
				this.videoFile.splice(e, 1)
			},
			async bbsEdit() {
				console.log("images", this.images)
				await this.helper.checkForm([
					['string', this.title, this.$t('public.title')],
					['string', this.content, this.$t('public.content')],
				])
				console.log("this.videoFile", this.videoFile)
				await bbsEdit({
					title: this.title,
					content: this.content,
					images: this.images.join(','),
					video_files: this.videoFile,
					id: this.pageId
				})
				this.helper.showToast(this.$t('message.success'))
				await this.helper.delay(1000, () => {
					uni.navigateBack()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-input,
	/deep/ .u-textarea {
		border: none !important
	}

	.bottomContent {

		position: fixed;
		bottom: 60rpx;
		left: 25rpx;
		right: 25rpx;

		.descText {
			width: 100%;
			text-align: center;
			font-size: 28rpx;

		}
	}

	.imageContent {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;

		.imageBox {
			width: 160rpx;
			height: 160rpx;
			margin-right: 20rpx;
			position: relative;
			margin-bottom: 40rpx;

			image {
				width: 160rpx;
				height: 160rpx;

			}

			video {
				width: 160rpx;
				height: 160rpx;

			}

			.delIcon {
				position: absolute;
				top: -35rpx;
				right: -15rpx;
			}
		}

		.imageBox:nth-child(4n) {
			margin-right: 0;
		}
	}
</style>